<template>
    <div class="recommend-count-list">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">总赚取</span>
            </template>
        </van-nav-bar>

        <div class="recomment-title">
            <p>总赚取<span class="getter"></span>￥<span>{{Result.all_money.split(".")[0]}}</span>.{{Result.all_money.split(".")[1]}}</p>
        </div>

        <div class="Promote-list">
            <div :class="['promote-template',showItem=='A'?'dark-template':'']" @click="changetag('A')">
                <span>￥<span style="font-size:18px;">{{Result.all_invite_money.split(".")[0]}}</span>.{{Result.all_invite_money.split(".")[1]}}</span>
                <p>推荐金</p>
            </div>
            <div :class="['promote-template',showItem=='B'?'dark-template':'']" @click="changetag('B')">
                <span>￥<span style="font-size:18px;">{{Result.com_money.split(".")[0]}}</span>.{{Result.com_money.split(".")[1]}}</span>
                <p>躺赚金</p>
            </div>
        </div>

        <div class="list">

            <div class="user-list-template" v-for="(item,index) in Result.commission_list" v-if="showItem=='B'" @click="JumptoDes(item.id)">
                <van-row>
                    <van-col span="4">
                        <a-avatar :src="item.userss.head_pic.indexOf('http:')>-1?`${item.userss.head_pic}`:`http://www.starrymedia.vip${item.userss.head_pic}`" :size="40" />
                    </van-col>
                    <van-col span="20">
                        <van-cell>
                            <template #title>
                                <span style="font-size:15px;color:#333;">{{item.userss.mobile | changePhone}}</span>
                            </template>
                            <template #label>
                                <span>{{item.order_create_time}}</span>
                            </template>
                            <template #default>
                                <span 
                                style="color:#333;display: block;margin-top: 12px;font-family: 'PingFang SC','Microsoft YaHei';"
                                v-html="ayTime(item)"
                                > 
                                </span>
                            </template>
                        </van-cell>
                    </van-col>
                </van-row>
            </div>

            <div class="user-list-template" v-for="(item,index) in Result.invite_list" v-if="showItem=='A'" @click="JumpToDe(item)">
                <van-row>
                    <van-col span="4">
                        <a-avatar :src="item.head_pic.indexOf('http:')>-1?`${item.head_pic}`:`http://www.starrymedia.vip${item.head_pic}`" :size="40" />
                    </van-col>
                    <van-col span="20">
                        <van-cell>
                            <template #title>
                                <span style="font-size:15px;color:#333;">{{item.mobile | changePhone}}</span>
                            </template>
                            <template #label>
                                <span>{{item.agent_time}}</span>
                            </template>
                            <template #default>
                                <span style="color:#333;display: block;margin-top: 15px;">￥ 
                                    <span style="font-size:24px;">{{Result.invite_money}}</span>
                                </span>
                            </template>
                        </van-cell>
                    </van-col>
                </van-row>
            </div>

            
        </div>
    </div>
</template>
<script>
import { _getCommissionMoney } from '../../service/proxy'
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            headerimg:require('../../assets/img/logo.png'),

            countList:[],
            Result:{},
            showItem:"A",
        }
    },
    mounted(){
        this.getData()
        if(localStorage.getItem("routerHistory")=="/proearndetail"){
            this.changetag('B')
        }
    },
    filters:{
        formateDate(time){
            return moment(time*1000).format('YYYY-MM-DD HH:mm:ss')
        },
        changePhone(val){
            if(val!=undefined){
                return val.replace(/(^\d{3}|\d{4}\B)/g,"$1 ");
            }
        },
    },
    methods:{
        JumptoDes(id){
            this.$router.push({path:"/proearndetail",query:{id}})
        },
        JumpToDe(info){
            let obj={}
            obj.info=info
            obj.money=this.Result.invite_money
            localStorage.setItem("recomcount-detail",JSON.stringify(obj))
            this.$router.push("/recomdetail")
        },
        changetag(key){
            this.showItem=key
        },
        ayTime(val){
            // let a=moment([new Date(val.create_time).getFullYear(),new Date(val.create_time).getMonth()+1,new Date(val.create_time).getDate()])
            // let b=a.diff(moment(), 'days')
            let a=new Date(val.order_create_time).getTime()+(14*24*60*60*1000)-new Date().getTime()
            let b=new Date(a).getDate()
            console.log(b)
            if(b>0){
                return `到账剩余<span style="font-size:36px;font-family:'DINPro-Bold';">${Math.abs(b)}</span>天`
            }else{
                return val.status
            }
        },
        onClickLeft(){
            this.$router.go(-1)
        },
        getData(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _getCommissionMoney({
                user_id:uid
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.Result=res.data
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.recommend-count-list{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    .recomment-title{
        width: 325px;
        height: 66px;
        background-image: url("../../assets/img/proxy-count.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        // margin: 10px auto;
        position: relative;
        top: 20px;
        left: 26px;
        right: 26px;
        z-index: 200;
        color: #fff;
        box-shadow: 0 5px 10px rgba(51, 51, 51, .5);
        p{
            .font-SC();
            text-align: center;
            line-height: 60px;
            font-size: 12px;
            margin-bottom: 0;
            span{
                font-family: "DINPro Medium";
                font-size: 30px;
            }
            .getter{
                display: inline-block;
                width: 10px;
                height: 2px;
            }
        }
    }


    .Promote-list{
        width: 357px;
        height: 80px;
        background-color: #fff;
        position: relative;
        top: 0px;
        left: 9px;
        right: 9px;
        border-radius: 5px;
        box-shadow: 0px 3px 7px rgba(237, 236, 236, .59);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .promote-template{
            display: inline-block;
            width: 80px;
            height: 66px;
            color: #ccc;
            text-align: center;
            padding-top: 20px;
            padding-bottom: 8px;
            span{
                font-family: "DINPro Medium";
                font-size: 9px;
                line-height: 30px;
            }
            p{
                .font-SC();
                font-size: 9px;
                margin-bottom: 0;
            }
        }
        .dark-template{
            color: #333;
        }
    }


    .list{
        width: 100%;
        min-height: 100px;
        padding: 10px 15px;
        .user-list-template{
            width: 100%;
            height: auto;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 3px 7px rgba(237, 236, 236, .59);
            /deep/.van-cell{
                padding: 0;
                font-family: 'DINPro Medium';
                font-size: 12px;
                color: #999;
                line-height: 20px;
            }
            /deep/.van-cell:not(:last-child)::after{
                display: none;
            }
            /deep/.van-cell__value{
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }










}
</style>